<template>
  <div class="app-container">
    <nav-search-box>
      <div class="nav-input">
        <el-input
          v-model="formData.name"
          placeholder="用户名称"
          clearable
          size="mini"
        />
      </div>
      <div class="nav-input">
        <el-input
          v-model="formData.name"
          placeholder="手机号"
          clearable
          size="mini"
        />
      </div>
      <div class="nav-input">
        <el-input
          v-model="formData.name"
          placeholder="单号"
          clearable
          size="mini"
        />
      </div>
      <div class="nav-address">
        <AddrssSelect :value="'1'" @address="getAddress" />
      </div>
      <div class="nav-input">
        <el-select
          v-model="formData.sex"
          placeholder="选择权限"
          filterable
          size="mini"
          clearable
        >
          <el-option
            v-for="item in sexOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </div>
      <el-button size="mini" type="primary" icon="el-icon-search"
        >查询</el-button
      >
      <el-button size="mini" type="warning" icon="el-icon-brush"
        >重置</el-button
      >
    </nav-search-box>
    <SortTable
      headerTitle="高级表格"
      :listLoading="listLoading"
      :columns.sync="columns"
      :listData="listData"
      :total="total"
      :listQuery="listQuery"
      @onRefreshClick="onTableRefreshClick"
      @getpaginationList="getpaginationList"
      @selection-change="handleSelectionChange"
    >
      <!-- 顶部操作按钮 -->
      <template #toolBarRender>
        <el-button size="mini" type="primary" icon="el-icon-download"
          >导入</el-button
        >
        <el-button size="mini" type="primary" icon="el-icon-circle-plus-outline"
          >新增</el-button
        >
      </template>
      <!-- 以下配合scope使用 -->
      <template #selection>
        <el-table-column type="selection" width="55" align="center" />
      </template>
      <template #switch="scope">
        <el-switch
          v-model="scope.row.is_enable"
          :size="scope.size"
          active-color="#13ce66"
          inactive-color="#ff4949"
        >
        </el-switch>
      </template>
      <template #button="scope">
        <el-button :size="scope.size" type="primary"
          >主要按钮{{ scope.row.id }}</el-button
        >
      </template>
      <!-- 下面会追加在列表最后 -->
      <el-table-column label="操作" fixed="right" width="180" align="center">
        <template slot-scope="scope">
          <div class="operation-table-column">
            <div
              class="operation-item"
              @click="onEditClick(scope.row.id)"
            >
              编辑
            </div>
            <el-divider direction="vertical"></el-divider>
            <el-popconfirm
              v-show="scope.row.is_enable == 1"
              confirmButtonText="好的"
              cancelButtonText="不用了"
              icon="el-icon-info"
              iconColor="red"
              :title="getPopconText(scope.row.account)"
              @onConfirm="onFreeze(scope.row)"
            >
              <div slot="reference" class="operation-item">
                冻结
              </div>
            </el-popconfirm>
            <el-popconfirm
              v-show="scope.row.is_enable == 0"
              confirmButtonText="好的"
              cancelButtonText="不用了"
              icon="el-icon-info"
              iconColor="red"
              :title="getOpenPopconText(scope.row.account)"
              @onConfirm="onEnable(scope.row)"
            >
              <div slot="reference" class="operation-item">启用</div>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </SortTable>
  </div>
</template>

<script>
import { getUserList } from '@/api/systemmanage'
import SortTable from '@/components/SortTable/index.vue'
import NavSearchBox from '@/layout/components/NavSearchBox/index.vue'
import AddrssSelect from '@/components/SearchAddressSelect'
export default {
  name: 'RatioSetting',
  components: {
    SortTable,
    NavSearchBox,
    AddrssSelect,
  },
  data() {
    return {
      columns: [
        {
          title: '账户',
          align: 'center',
          dataIndex: 'account',
          minWidth: '160',
        },

        {
          title: '账户名称',
          align: 'center',
          dataIndex: 'contact_name',
          minWidth: '150',
        },
        {
          title: '状态',
          align: 'center',
          minWidth: '95',
          formatter: (row) => {
            return row.is_enable == 1 ? '启用' : '冻结'
          },
        },
        {
          title: '状态2',
          align: 'center',
          minWidth: '95',
          tagType: (row) => {
            return row.is_enable == 1 ? 'success' : 'danger'
          },
          formatter: (row) => {
            return row.is_enable == 1 ? '启用' : '冻结'
          },
        },
        {
          title: '开关',
          align: 'center',
          minWidth: '105',
          scope: 'switch',
        },
        {
          title: '按钮',
          align: 'center',
          minWidth: '155',
          scope: 'button',
        },
        {
          title: '角色名称',
          align: 'center',
          dataIndex: 'role_name',
          minWidth: '130',
        },
        {
          title: '创建时间',
          align: 'center',
          minWidth: '160',
          formatter: (row) => {
            return row.ctime_str ? row.ctime_str.replaceAll('-', '/') : '--'
          },
        },
      ],
      formData: {
        name: '',
        sex: '',
      },
      sexOptions: [
        { id: 0, name: '权限1' },
        { id: 1, name: '权限2' },
      ],
      listLoading: false,
      listData: [],
      total: 0,
      listQuery: {
        current: 1,
        pageSize: 10,
      },
    }
  },
  mounted() {
    this._getUserList()
  },
  methods: {
    getPopconText(name) {
      return '确定冻结账号 ' + name + ' 吗？'
    },
    getOpenPopconText(name) {
      return '确定启用账号 ' + name + ' 吗？'
    },
    //table刷新
    onTableRefreshClick() {
      this._getUserList()
    },
    /**
     * 获取地址
     */
    getAddress(val) {
      console.log(val)
    },
    /**
     * 冻结
     */
    onFreeze(item) {},
    /**
     * 启用
     */
    onEnable(item) {},
    /**
     * 编辑
     */
    onEditClick(id) {},
    /**
     * 分页
     */
    getpaginationList(val) {
      this.listQuery = { ...val }
      this._getUserList()
    },
    //选择
    handleSelectionChange(val) {
      console.log(val)
    },
    //列表
    _getUserList() {
      this.listLoading = true
      getUserList({ ...this.listQuery })
        .then((res) => {
          this.total = res.data.total
          this.listData = res.data.rows
        })
        .catch((res) => {})
        .finally(() => {
          this.listLoading = false
        })
    },
  },
}
</script>

<style lang="scss" scoped>

</style>
